<template>
  <div class="chart-container" style="position: relative;">
    <div v-if="show" style="position: relative;">
      <el-select v-model="listQuery.date" placeholder="排序规则" class="filter-item aaa">
        <el-option v-for="(item, index) in date" :key="index" :label="item" :value="index" />
      </el-select>
      <el-button class="button" icon="el-icon-search" @click="getList">搜索</el-button>
    </div>
    <div :id="id" :class="className" :style="{height:height,width:width}" />

  </div>
</template>
<style>
  .chart-container .el-input__inner {
    background: rgb(57, 64, 86);
    border: none;
  }

  .aaa {
    width: 150px;
    position: absolute;
    top: 50;
    left: 0;
    z-index: 99;
    margin-top: 20px;
    margin-left: 20px;
    background: rgb(57, 64, 86);
    border: none;
  }

  .button {
    background: rgb(57, 64, 86);
    position: absolute;
    left: 170px;
    top: 20px;
    z-index: 99;
    border: none;
  }
</style>
<script>
  import echarts from 'echarts'
  import resize from '@/components/Charts/mixins/resize'
  import Chart from '@/components/Charts/LineMarker'

  import {
    statistics
  } from '@/api/money.js';
  export default {
    mixins: [resize],
    name: 'LineChart',
    components: {
      Chart
    },
    data() {
      return {
        list: {},
        listQuery: {
          date: '最近几个小时'
        },
        date: {
          1: '最近几个小时',
          2: '最近几天',
          3: '最近几个星期',
          4: '最近几个月'
        },
        show: false,
        chart: null,
        id: 'chart',
        className: 'chart',
        width: '100%',
        'height': '100%'
      };
    },
    created() {
      this.getList()
    },
    methods: {
      async getList() {
        let res = await statistics(this.listQuery)
        this.list = res.data
        this.initChart()
        this.show = true
        // statistics(this.listQuery).then(res => {
        //   this.list = res.data
        // })
      },

      initChart() {
        this.chart = echarts.init(document.getElementById(this.id))
        this.chart.setOption({
          backgroundColor: '#394056',
          // backgroundColor: '#ffffff',
          title: {
            top: 20,
            text: '统计',
            textStyle: {
              fontWeight: 'normal',
              fontSize: 30,
              color: '#F1F1F3',
            },
            left: '50%',

          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                color: '#57617B'
              }
            }
          },
          legend: {
            top: 20,
            icon: 'rect',
            itemWidth: 14,
            itemHeight: 5,
            itemGap: 13,
            data: ['提现数量', '提现笔数', '充值数量', '充值笔数'],
            right: '4%',
            textStyle: {
              fontSize: 12,
              color: '#F1F1F3'
            }
          },
          grid: {
            top: 100,
            left: '2%',
            right: '2%',
            bottom: '2%',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: '#57617B'
              }
            },
            data: this.list.date
          }],
          yAxis: [{
            type: 'value',
            name: '(元)',
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#57617B'
              }
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                fontSize: 14
              }
            },
            splitLine: {
              lineStyle: {
                color: '#57617B'
              }
            }
          }],
          series: [{
            name: '提现数量',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 1
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(137, 189, 27, 0.3)'
                }, {
                  offset: 0.8,
                  color: 'rgba(137, 189, 27, 0)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: 'rgb(137,189,27)',
                borderColor: 'rgba(137,189,2,0.27)',
                borderWidth: 12

              }
            },
            data: this.list.withdrawal
          }, {
            name: '提现笔数',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 1
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(219, 50, 51, 0.3)'
                }, {
                  offset: 0.8,
                  color: 'rgba(219, 50, 51, 0)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: 'rgb(219,50,51)',
                borderColor: 'rgba(219,50,51,0.2)',
                borderWidth: 12
              }
            },
            data: this.list.withdrawalCount
          }, {
            name: '充值数量',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 1
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(0, 136, 212, 0.3)'
                }, {
                  offset: 0.8,
                  color: 'rgba(0, 136, 212, 0)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: 'rgb(0,136,212)',
                borderColor: 'rgba(0,136,212,0.2)',
                borderWidth: 12

              }
            },
            data: this.list.payOrder
          }, {
            name: '充值笔数',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 1
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(66,185,131, 0.3)'
                }, {
                  offset: 0.8,
                  color: 'rgba(66,185,1311, 0)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: 'rgb(66,185,131)',
                borderColor: 'rgba(66,185,131,0.2)',
                borderWidth: 12
              }
            },
            data: this.list.payOrderCount
          }]
        })
      }
    }
  }
</script>

<style scoped>
  .chart-container {
    position: relative;
    width: 100%;
    height: calc(100vh - 84px);
  }
</style>
